<template>
	<view class="content" :style="{backgroundImage: 'url('+imageURL+')'}">
		<view class="box">
			<uni-forms ref="form" :modelValue="formData">
				<uni-forms-item label="用户名" name="formData.name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item  label="密码" name="formData.pwd">
					<uni-easyinput  type="password" v-model="formData.pwd" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="formData.pwds">
					<uni-easyinput type="password" v-model="formData.pwds" placeholder="请输入密码" />
				</uni-forms-item>
				<button type="primary" @click="submit" >注册</button>
				<button type="primary" @click="goregister">去登录页面</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				imageURL: "../../static/image/back3.gif",
				formData: {
					name: "",
					pwd: "",
					pwds: "",
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: "请填写用户名",
							},
						],
					},
					address: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: "请填写密码",
							},
						],
					},
				},
			};
		},
		methods: {
			goregister(){
			    uni.navigateBack(-1)
			},
			submit() {
				let _this = this
				if(_this.formData.name != "" && _this.formData.pwd != ""){
					uni.request({
						url: 'http://localhost:8000/api/denglu',
						method: 'POST',
						data: {
							message: { 
								username:_this.formData.name,
								passwrok:_this.formData.pwd
							}
						},
						success(res) {
							console.log(res.data.message);
							if(res.data.message=="注册成功"){
								uni.navigateTo({
									url:"/pages/Login/Login"
								})
							}
						}
					})
				}
				
			},
			
		},
	};
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-size: 100%;

	}

	.box {
		width: 90%;
		height: auto;
		position: fixed;
		top: 25%;
		left: 5%;
		
		button{
			margin-top: 20rpx;
		}

	}
	
</style>
